import React, {Component} from 'react';
import commonConfig from "../../static/js/commonConfig";
import HeadComponent from "../common/headComponent";
import {Button, Input, InputNumber} from "antd";
import {CaretLeftOutlined, CaretRightOutlined} from "@ant-design/icons";
import ContentComponent from "../common/contentComponent";
import {Document, Page, pdfjs} from "react-pdf";
import '../../static/scss/fileViewer/pdfViewer.scss'

pdfjs['GlobalWorkerOptions'].workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`

class PdfViewerApp extends Component {
    state = {
        totalPage: 0,
        pageNumber: 1,
        url: '',
        pageValue: '',
        zoom: 100
    }

    componentDidMount() {
        const {bucketName, fileUrl} = commonConfig.getUrlParams(this);
        let obj = {bucketName, fileUrl}
        this.setState({url: commonConfig.downloadFile(obj)}, () => {
            commonConfig.startProgress();
        })
    }

    /*获取PDF页数*/
    onLoadSuccess = ({numPages}) => {
        this.setState({totalPage: numPages}, () => {
            this.setInputValue();
        });
    }

    prevPage = () => {
        commonConfig.startProgress();
        this.setState({pageNumber: this.state.pageNumber - 1}, () => {
            this.setInputValue();
        })
    }

    nextPage = () => {
        commonConfig.startProgress();
        this.setState({pageNumber: this.state.pageNumber + 1}, () => {
            this.setInputValue();
        })
    }

    /*按下回车触发*/
    pagePressEnter = (e) => {
        const {totalPage} = this.state;
        let val = e.target.value;
        if (val < 1) {
            val = 1;
        }
        if (val > totalPage) {
            val = totalPage
        }
        this.setState({pageNumber: parseInt(val)}, () => {
            e.target.blur();
        });
    }
    /*输入框输入触发*/
    pageInput = (e) => {
        let val = e.target.value
        if (!/[0-9]$/.test(val)) {
            val = this.state.pageNumber;
        }
        this.setState({pageValue: val});
    }
    /*输入框获得焦点*/
    pageFocus = () => {
        this.setState({pageValue: ''});
    }

    /*输入框失去焦点*/
    pageBlur = () => {
        this.setInputValue();
    }

    setInputValue = () => {
        const {pageNumber, totalPage} = this.state;
        this.setState({pageValue: pageNumber + '/' + totalPage})
    }

    changeInputNumber = val => {
        this.setState({zoom: val < 100 ? 100 : val});
    }

    /*数字转换数组*/
    numberConversionArray = (num) => {
        let arr = [];
        for (let i = 0; i < num; i++) {
            arr.push(num[i])
        }
        return arr;
    }

    render() {
        const {pageNumber, totalPage, url, pageValue, zoom} = this.state;
        const documentProps = {
            file: url,
            onLoadSuccess: this.onLoadSuccess,
            onLoadError: () => {
                commonConfig.endProgress();
            },
            renderMode: 'canvas'
        }

        const pageProps = {
            pageNumber,
            scale: zoom / 100,
            width: 1100,
            onLoadSuccess: () => {
                commonConfig.endProgress();
            },
            onLoadError: () => {
                commonConfig.endProgress();
            }
        }

        const inputNumberProps = {
            min: 100,
            max: 200,
            step: 10,
            value: zoom,
            formatter: val => `${val}%`,
            onChange: this.changeInputNumber
        }
        return (
            <>
                <div className="pdf_viewer_module">
                    <HeadComponent noNav={true} {...this.props}>
                        <div className="viewer_head float-left">
                            <h3>在线文件预览</h3>
                            <div className="viewer_operate_group">
                                <div className="page_tab">
                                    <Button onClick={this.prevPage} disabled={pageNumber <= 1}
                                            icon={<CaretLeftOutlined/>}>跳到</Button>
                                    <Input value={pageValue}
                                           onPressEnter={this.pagePressEnter}
                                           onInput={this.pageInput}
                                           onFocus={this.pageFocus}
                                           onBlur={this.pageBlur}/>
                                    <Button onClick={this.nextPage} disabled={pageNumber >= totalPage}
                                            icon={<CaretRightOutlined/>}>页</Button>
                                </div>
                                <div className="page_zoom">
                                    <InputNumber {...inputNumberProps}/>
                                </div>
                            </div>
                        </div>
                    </HeadComponent>
                    <div className="main_container animate__animated animate__fadeIn">
                        <ContentComponent copyrightStyle={{position: 'static'}}>
                            <Document {...documentProps}>
                                <Page {...pageProps}/>
                                {/*{new Array(totalPage).fill('').map((item, i) =>*/}
                                {/*    <div key={i} style={{marginBottom:20}}>*/}
                                {/*        <Page {...pageProps} pageNumber={i+1}/>*/}
                                {/*    </div>*/}
                                {/*)}*/}
                            </Document>
                        </ContentComponent>
                    </div>
                </div>
            </>
        )
    }
}

export default PdfViewerApp